<template>
  <div class="course-box">
    <div class="course_title">
      <img src="../../../../assets/editapp/ic_01.png" alt="" class="course_title_img">
      <div class="course_title_left">{{ list[leftIndex].title }}</div>
      <!-- <div class="course_title_right">
        <span>希望您喜欢</span>
      </div> -->
    </div>
    <!-- <div class="tabBox">
      <div v-for="(itemTab,indexTab) in list[leftIndex].courseTab" :key="indexTab" class="tabList">{{ itemTab }}</div>
    </div>-->
    <!-- 左侧班级列表显示区域 -->
    <div class="courseListBox">
      <div v-for="(item,index) in list[leftIndex].courseList" :key="index" class="courseList">
        <div class="course_img">
          <img :src="list[leftIndex].courseList[index].url" />
          <div class="study">共{{ list[leftIndex].courseList[index].study }}</div>
        </div>
        <div class="course_con">
          <div class="course_con_title">{{ list[leftIndex].courseList[index].title }}</div>
<!--
          <div class="course_con_bottom">
            <span class="money">{{ list[leftIndex].courseList[index].money }} 元</span>
            <span class="study">{{ list[leftIndex].courseList[index].study }}</span>
          </div> -->
        </div>
      </div>
    </div>

    <!-- 右侧班级编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightList">
        <!-- 头部提示区域 -->
        <header class="title">热门课程列表设置</header>
        <div class="editCon">
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">列表标题：</span>
            <el-input v-model="list[leftIndex].title" style="width:200px;"></el-input>
          </div>
          <!-- <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">添加标题：</span>
            <el-select v-model="list[leftIndex].courseTab" multiple placeholder="请选择" style="width:200px;">
              <el-option
                v-for="item in courseCategorys"
                :key="item.value"
                :label="item.label"
                :value="item.name"
              />
            </el-select>
          </div>-->
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">发布时间：</span>
            <el-select
              v-model="list[leftIndex].recentDay"
              placeholder="请选择"
              style="width:200px;"
              @change="recentDay($event)"
            >
              <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">展示条数：</span>
            <el-select
              v-model="list[leftIndex].limit"
              placeholder="请选择"
              style="width:200px;"
              @change="limitNumber($event)"
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCategoryList } from '@/api/subject/category'
import { getTenantId } from '@/utils/auth'
import { courseList } from '@/api/user/user' // 数据接口

export default {
  props: ['list', 'leftIndex'],
  data() {
    return {
      courseCategorys: [],
      rightIndex: 0,
      fileList: [],
      EduUserVo: {},
      keyWord: '',
      courseDialogVisible: false,
      classDialogVisible: false,
      dayValue: '',
      limitValue: '',

      linkTableData: [
        { name: 'class NO.1', price: '2', number: '2', createTime: '2' }
      ],
      tabOptions: [],
      dayOptions: [
        { value: '3', label: '最近3天' },
        { value: '7', label: '最近7天' },
        { value: '15', label: '最近15天' },
        { value: '30', label: '最近30天' }
      ],
      cascaderOptions: [],
      selectOptions: [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        { value: '3', label: '3' },
        { value: '4', label: '4' },
        { value: '5', label: '5' }
      ]
    }
  },
  mounted() {
    this.getCourseCategorys()
    console.log(this.courseCategorys)
  },
  methods: {
    getCourseCategorys() {
      getCategoryList('course', getTenantId(),'0')
        .then(response => {
          console.log(response.data.items)
          this.courseCategorys = response.data.items
        })
        .catch(() => {})
    },
    // 动态获取列表数据
    getCourseList() {
      this.EduUserVo.tenantId = getTenantId()
      this.EduUserVo.categoryId = this.list[this.leftIndex].courseType
      this.EduUserVo.limit = this.list[this.leftIndex].limit
      this.EduUserVo.day = this.list[this.leftIndex].recentDay
      courseList(this.EduUserVo)
        .then(response => {
          this.list[this.leftIndex].courseList = response.data.items
          this.list[this.leftIndex].courseList.map(i => {
            i.url = i.largePicture
            i.money = i.price
          })
        })
        .catch(() => {})
    },
    courseType(item) {
      this.list[this.leftIndex].courseType = item[item.length - 1]
      this.getCourseList()
    },
    recentDay() {
      this.getCourseList()
    },
    limitNumber() {
      this.getCourseList()
    }
  }
}
</script>
<style lang="scss" scoped>
.course-box {
  .course_title {
    display: flex;
    align-items: center;
    padding: 10px;
  .course_title_img {
        width: 22px;
    margin-right: 5px;

  }
    .course_title_left {
      font-size: 16px;
      font-weight: bold;
    }

    .course_title_right {
      margin-left: 10px;
      font-size: 12px;
      color: #616161;
    }
  }

  .tabBox {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 0 10px;
    overflow: auto;

    .tabList {
      width: 20%;
      height: 100%;
      box-sizing: border-box;
      text-align: center;
      padding: 10px 0;
      flex-shrink: 0;
    }

    .tabList:first-child {
      border-bottom: 2px solid rgb(77, 139, 255);
    }
  }
  .courseListBox {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;

  }
  .courseList {
    width: 49%;
    margin-right: 2%;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 10px 10px #eee;
     &:nth-child(2n) {
      margin-right: 0;
    }
    .course_img {
      position: relative;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
        .study {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;

          font-size: 14px;
          color: #fff;
          padding: 5px 10px;
          background: rgba($color: #000000, $alpha: 0.7);
        }
    }

    .course_con {
      padding: 8px;
      .course_con_title {
        color: #969696;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        height: 32px;
      }
      .course_con_bottom {
        margin: 5px 0;
        color: #616161;

        .money {
          color: #ff5d5d;
          font-size: 15px;
        }

      }
    }
  }
}

.editRightList {
  width: 400px;
  position: absolute;
  left: 105%;
  top: 0;
  padding: 10px;
  border: 1px solid #e1e1e1;
  background-color: #fafafa;

  .title {
    font-size: 14px;
    padding: 8px;
    border-bottom: 1px solid #e1e1e1;

    .help-text {
      font-size: 12px;
      color: #616161;
      margin-top: 5px;
    }
  }

  .editCon {
    background-color: #fff;
    padding: 10px 5px;
    border: 1px solid #e1e1e1;
    margin-top: 5px;
  }
}
</style>
